import React from 'react';
import styles from './Input.module.css';

export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
    label?: string;
    error?: string;
}

export const Input: React.FC<InputProps> = ({
    label,
    error,
    className,
    ...props
}) => {
    return (
        <div className={styles.formGroup}>
            {label && (
                <label className={styles.label}>
                    {label}
                </label>
            )}
            <input
                className={`${styles.input} ${error ? styles.error : ''} ${className || ''}`}
                {...props}
            />
            {error && (
                <div className={styles.errorMessage}>
                    {error}
                </div>
            )}
        </div>
    );
};